import HeaderNav from "@/components/header-nav"
import { CheckOutline } from 'antd-mobile-icons'
import styles from "./index.module.less"
import { useEffect } from "react"

const MembershipDetails = () => {
  return (
    <div className="warp">
      <div className="header">
        <HeaderNav title="会员等级详情" backArrow={true}></HeaderNav>
      </div>
      <div className={styles.memberContent}>
        {/* 会员分类说明 */}
        <div className={styles.memberIntro}>
          <div className={styles.introCard}>
            <div className={styles.introTitle}>
              <i className="fas fa-info-circle" />
              <span>会员分类说明</span>
            </div>
            <div className={styles.introText}>
              AI物语会员分为基础会员、高级会员和专业会员三大类，选择不同会员等级，每次对话消耗的梦钥数量不同。会员等级越高，梦钥消耗越少。
            </div>
          </div>
        </div>

        {/* 基础会员卡片 */}
        <div className={styles.memberSection}>
          <h3 className={styles.sectionTitle}>
            <span className={styles.titleBar}></span>
            基础会员
          </h3>

          {/* 免费会员 */}
          <div className={styles.membershipCard}>
            <div className={styles.cardHeader}>
              <div className={styles.cardLeft}>
                <div className={styles.cardIcon}>
                  <i className="fas fa-user"></i>
                </div>
                <div className={styles.cardInfo}>
                  <h4>免费会员</h4>
                  <p>无需付费</p>
                </div>
              </div>
              <span className={styles.currentBadge}>当前</span>
            </div>

            <div className={styles.cardFeatures}>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>基础AI角色访问</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>每天10次对话</span>
              </div>
              <div className={styles.featureDisabled}>
                <i className="fas fa-times-circle" />
                <span>高级角色访问</span>
              </div>
              <div className={styles.featureDisabled}>
                <i className="fas fa-times-circle" />
                <span>长文本生成</span>
              </div>
            </div>

            <div className={styles.diamondInfo}>
              <i className="fas fa-key" />
              <span>每次对话消耗<b>10</b>梦钥</span>
            </div>

            <div className={styles.cardButton}>
              <button className={styles.currentLevel}>当前等级</button>
            </div>
          </div>

          {/* 初级会员 */}
          <div className={styles.membershipCard}>
            <div className={styles.cardHeader}>
              <div className={styles.cardLeft}>
                <div className={`${styles.cardIcon} ${styles.greenIcon}`}>
                  <i className="fas fa-leaf"></i>
                </div>
                <div className={styles.cardInfo}>
                  <h4>初级会员</h4>
                  <p>¥18/月</p>
                </div>
              </div>
            </div>

            <div className={styles.cardFeatures}>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>基础AI角色访问</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>每天30次对话</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>基础响应速度</span>
              </div>
              <div className={styles.featureDisabled}>
                <i className="fas fa-times-circle" />
                <span>长文本生成</span>
              </div>
            </div>

            <div className={styles.diamondInfo}>
              <i className="fas fa-key" />
              <span>每次对话消耗<b>8</b>梦钥</span>
            </div>

            <div className={styles.cardButton}>
              <button className={styles.upgrade}>选择此等级</button>
            </div>
          </div>

          {/* 普通会员 */}
          <div className={`${styles.membershipCard} ${styles.hotCard}`}>
            <div className={styles.hotBadge}>最热</div>
            <div className={styles.cardHeader}>
              <div className={styles.cardLeft}>
                <div className={`${styles.cardIcon} ${styles.orangeIcon}`}>
                  <i className="fas fa-star"></i>
                </div>
                <div className={styles.cardInfo}>
                  <h4>普通会员</h4>
                  <p>¥38/月</p>
                </div>
              </div>
            </div>

            <div className={styles.cardFeatures}>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>所有基础角色</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>每天50次对话</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>中等响应速度</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>基础长文本生成</span>
              </div>
            </div>

            <div className={styles.diamondInfo}>
              <i className="fas fa-key" />
              <span>每次对话消耗<b>5</b>梦钥</span>
            </div>

            <div className={styles.cardButton}>
              <button className={styles.upgrade}>选择此等级</button>
            </div>
          </div>
        </div>

        {/* 高级会员卡片 */}
        <div className={styles.memberSection}>
          <h3 className={styles.sectionTitle}>
            <span className={`${styles.titleBar} ${styles.titleBarYellow}`}></span>
            高级会员
          </h3>
          
          <div className={styles.membershipCard}>
            <div className={styles.cardHeader}>
              <div className={styles.cardLeft}>
                <div className={`${styles.cardIcon} ${styles.yellowIcon}`}>
                  <i className="fas fa-crown"></i>
                </div>
                <div className={styles.cardInfo}>
                  <h4>高级会员</h4>
                  <p>¥88/月</p>
                </div>
              </div>
            </div>

            <div className={styles.cardFeatures}>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>所有高级角色</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>无限次对话</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>高速响应</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>高级长文本生成</span>
              </div>
            </div>

            <div className={styles.diamondInfo}>
              <i className="fas fa-key" />
              <span>每次对话消耗<b>3</b>梦钥</span>
            </div>

            <div className={styles.cardButton}>
              <button className={styles.upgrade}>选择此等级</button>
            </div>
          </div>
        </div>

        {/* 专业会员卡片 */}
        <div className={styles.memberSection}>
          <h3 className={styles.sectionTitle}>
            <span className={`${styles.titleBar} ${styles.titleBarBlue}`}></span>
            专业会员
          </h3>

          {/* 梦钥会员 */}
          <div className={styles.membershipCard}>
            <div className={styles.cardHeader}>
              <div className={styles.cardLeft}>
                <div className={`${styles.cardIcon} ${styles.blueIcon}`}>
                  <i className="fas fa-key"></i>
                </div>
                <div className={styles.cardInfo}>
                  <h4>梦钥会员</h4>
                  <p>¥128/月</p>
                </div>
              </div>
            </div>

            <div className={styles.cardFeatures}>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>专属定制角色</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>高级图像生成</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>最高响应速度</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>专业文档处理</span>
              </div>
            </div>

            <div className={styles.diamondInfo}>
              <i className="fas fa-key" />
              <span>每次对话消耗<b>2</b>梦钥</span>
            </div>

            <div className={styles.cardButton}>
              <button className={styles.upgrade}>选择此等级</button>
            </div>
          </div>

          {/* 至尊会员 */}
          <div className={styles.membershipCard}>
            <div className={styles.cardHeader}>
              <div className={styles.cardLeft}>
                <div className={`${styles.cardIcon} ${styles.purpleIcon}`}>
                  <i className="fas fa-chess-king"></i>
                </div>
                <div className={styles.cardInfo}>
                  <h4>至尊会员</h4>
                  <p>¥198/月</p>
                </div>
              </div>
            </div>

            <div className={styles.cardFeatures}>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>全平台特权</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>专属客服</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>优先体验新功能</span>
              </div>
              <div className={styles.feature}>
                <CheckOutline className={styles.checkIcon} />
                <span>高级定制训练</span>
              </div>
            </div>

            <div className={styles.diamondInfo}>
              <i className="fas fa-key" />
              <span>每次对话消耗<b>1</b>梦钥</span>
            </div>

            <div className={styles.cardButton}>
              <button className={styles.upgrade}>选择此等级</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MembershipDetails;
